<template>
	<view v-if="orderInfo">
		<!--pages/myOrderDetail/myOrderDetail.wxml-->
		<block v-if="orderInfo.order_genre==4">
			<!-- 订单状态轴 -->
			<view class="order-procedure">
				<view class="state-axis">
					<view :class="'axis-round' + (orderInfo.pay_state==0?'':' round-active')"></view>

					<view :class="'axis-line' + (orderInfo.tail_money_state==1||orderInfo.pay_state==1?' line-active':'')" v-if="advance.advance_type == 2">
					</view>
					<view :class="'axis-round' + (orderInfo.pay_state==1||orderInfo.tail_money_state==1?' round-active':'')" v-if="advance.advance_type == 2">
					</view>

					<view :class="'axis-line' + (orderInfo.status>1?' line-active':'')"></view>
					<view :class="'axis-round' + (orderInfo.status>1?' round-active':'')"></view>

					<view :class="'axis-line' + (orderInfo.status>2?' line-active':'')"></view>
					<view :class="'axis-round' + (orderInfo.status>2?' round-active':'')"></view>
				</view>
				<view class="state-txts">
					<view class="state-txt txt-active">{{advance.advance_type == 1?'付全款':"付定金"}}</view>
					<view :class="'state-txt' + (orderInfo.pay_state==1?' txt-active':'')" v-if="advance.advance_type == 2">付尾款</view>
					<view :class="'state-txt' + (orderInfo.status>1?' txt-active':'')">
						{{orderInfo.pickup_type==1?'自取':orderInfo.pickup_type==2?'配送':'发货'}}
					</view>
					<view :class="'state-txt' + (orderInfo.status>2?' txt-active':'')">交易完成</view>
				</view>
			</view>
		</block>
		<view class="list-box" v-if="orderInfo.sell_info && orderInfo.sell_info.length>0">
			<view class="setTitle">
				<view>商品详情</view>
			</view>
			<view class="order-body" v-for="(goods, index) in goodsList" :key="index">
				<view class="order-img" @tap="details" :data-id="goods.goods_id">
					<image :src="goods.goods_img" mode="aspectFit"></image>
				</view>
				<view class="orderCon">
					<view class="good-name-width flex-spb-cn">
						<!-- <text class="gift_icon">送</text> -->
						<text class="goods_name">{{goods.goods_name}}</text>
						<view>
							<block v-if="(goods.vip_price>0||goods.plus_vip_price>0)&&(orderInfo.order_genre==1 || orderInfo.type == 2)">
								<text v-if="goods.vip_price>0" class="vip-price-style">VIP</text>
								<text v-else class="plus-vip-price-style">PLUS</text>
							</block>
							<text class='text-color'>￥{{goods.price}}</text>
							<block v-if="goods.use_integral>0&&goods.integral_marketing==2">
								<text class="good-intergral">+{{goods.use_integral}}{{integral_name}}</text>
							</block>
						</view>
					</view>
					<view class="flex-spb-cn">
						<view class="flex-col-cn">
							<view class="goods-sku" v-if="goods.sku_json_info&&goods.sku_json_info.id">
								{{goods.sku_json_info.name}}
							</view>
							<view class="order-num">
								<view class="good-num-color">x{{goods.num}}</view>
							</view>
						</view>
						<view class="underlined_price" v-if="(goods.vip_price>0||goods.plus_vip_price>0)&&(orderInfo.order_genre==1 || orderInfo.type == 2)">
							￥{{goods.original_price}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 购买详情 -->
		<block v-if="activeIndex==1">
			<view class="list-box">
				<view class="setList setTitle">
					<text>费用详情</text>
				</view>
				<view class="setList" v-if="orderInfo.use_integral>0">
					<text class="set-left-title">{{integral_name}}抵现：</text>
					<block v-if="orderInfo.integral_marketing==1">
						<text><text class='text-color'>{{orderInfo.use_integral}}</text>{{integral_name}} 抵扣<text
								class='text-color'>{{orderInfo.integral_dis_money}}</text>元</text>
					</block>
					<block v-else>
						<text><text class='text-color'>{{orderInfo.integral_dis_money}}</text>元 抵扣<text
								class='text-color'>{{orderInfo.use_integral}}</text>{{integral_name}}</text>
					</block>
				</view>
				<view class="setList" v-if="orderInfo.vip_less_money && orderInfo.vip_less_money>0">
					<text class="set-left-title">会员价：</text>
					<text class='text-color'>-{{orderInfo.vip_less_money}}元</text>
				</view>
				<view class="setList" v-if="orderInfo.cashier_manual_money && orderInfo.cashier_manual_money>0">
					<text class="set-left-title">单品折扣：</text>
					<text class='text-color'>-{{orderInfo.cashier_manual_money}}元</text>
				</view>
				<view class="setList" v-if="orderInfo.cashier_dis_money && orderInfo.cashier_dis_money>0">
					<text class="set-left-title">整单折扣：</text>
					<text class='text-color'>-{{orderInfo.cashier_dis_money}}元</text>
				</view>
				<view class="setList" v-if="orderInfo.vip_dis_money && orderInfo.vip_dis_money>0">
					<text class="set-left-title">会员折扣：</text>
					<text class='text-color'>-{{orderInfo.vip_dis_money}}元</text>
				</view>
				<view class="setList" v-if="orderInfo.coupon_money>0">
					<text class="set-left-title">优惠券</text>
					<text class='text-color'>-{{orderInfo.coupon_money}}元</text>
				</view>
				<view class="setList" v-if="orderInfo.pay_coupon_fee>0">
					<text class="set-left-title">代金券金额</text>
					<text class='text-color'>-{{orderInfo.pay_coupon_fee}}元</text>
				</view>
				<view class="setList" v-if="advance.advance_type==2&&advance.all_arrive_price>0">
					<text class="set-left-title">定金抵现</text>
					<text class='text-color'>-{{advance.all_arrive_price}}元</text>
				</view>
				<view class="setList" v-if="advance.small_changes_money&&advance.small_changes_money>0">
					<text class="set-left-title">抹零</text>
					<text class='text-color'>-{{advance.small_changes_money}}元</text>
				</view>
				<view class="setList" v-if="orderInfo.delivery_fee>0">
					<text class="set-left-title">配送费</text>
					<text>{{orderInfo.delivery_fee}}元</text>
				</view>
				<view class="setList setlist-font" style="justify-content: flex-end;">
					<view class="dis_all_money" v-if="orderInfo.dis_all_money>0">已优惠<text class='text-color'>￥{{orderInfo.dis_all_money}}</text>
					</view>
					<view class="flex-cn mar_l_10">合计<text class="all-money-font">￥{{orderInfo.all_money}}</text>
					</view>
				</view>
			</view>

			<view class="list-box" v-if="orderInfo.pickup_type==1">
				<view class="setList setTitle">
					<text>自提信息</text>
				</view>
				<view class="setList">
					<text class="set-left-title">姓名</text>
					<text>{{orderInfo.user_name}}</text>
				</view>
				<view class="setList">
					<text class="set-left-title">手机号</text>
					<text>{{orderInfo.user_phone}}</text>
				</view>
				<view class="setList"
					v-if="orderInfo.pay_state==1&&orderInfo.status==1&&(orderInfo.order_genre==1||orderInfo.order_genre==2&&orderInfo.act_state==2||orderInfo.order_genre==3&&orderInfo.act_state==1)">
					<text class="set-left-title">提货码</text>
					<text class="pick-code">{{orderInfo.pick_code}}</text>
				</view>
			</view>
			<view class="list-box" v-if="orderInfo.pickup_type==2||orderInfo.pickup_type==3">
				<view class="setList setTitle">
					<text>配送信息</text>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">配送方式</text>
					</view>
					<text v-if="orderInfo.deliverInfo">{{orderInfo.deliverInfo.driver_type}}</text>
				</view>
				<block v-if="orderInfo.pickup_type==2">
					<view class="setList setlist-flex" v-if="orderInfo.deliverInfo.delivery && orderInfo.deliverInfo.delivery>1">
						<view class="setLeft">
							<text class="set-left-title">配送服务</text>
						</view>
						<view class="setRight mysetright">
							<view class="mysetList mysetlist-flex">
								<view class="select-type">
									<text>{{orderInfo.deliverInfo.driver_type}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="setList setlist-flex" v-if="orderInfo.deliverInfo.delivery && orderInfo.deliverInfo.delivery>1">
						<view class="setLeft">
							<text>平台单号</text>
						</view>
						<view class="setRight mysetright" catchlongpress="copy" :data-order_no="orderInfo.deliverInfo.driver_order">
							<view class="mysetList mysetlist-flex">
								<view class="select-type">
									<text>{{orderInfo.deliverInfo.driver_order}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="setList setlist-flex" v-if="orderInfo.deliverInfo.delivery && orderInfo.deliverInfo.delivery>1">
						<view class="setLeft">
							<text>配送员</text>
						</view>
						<view class="setRight mysetright">
							<view class="mysetList mysetlist-flex">
								<view class="select-type">
									<text>{{orderInfo.deliverInfo.driver_name}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">姓名</text>
					</view>
					<text>{{orderInfo.user_name}}</text>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">手机号</text>
					</view>
					<text>{{orderInfo.user_phone}}</text>
				</view>
				<view class="setList setlist-flex">
					<view class="setLeft">
						<text class="set-left-title">收货地址</text>
					</view>
					<view class="setRight mysetright">
						<text>{{orderInfo.user_address}}</text>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="setList setTitle">
					<text>订单信息</text>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">订单号</text>
					</view>
					<view class="setRight mysetright" catchlongpress="copy" :data-order_no="orderInfo.order_no">
						<view class="mysetList">
							<view class="select-type">
								<text>{{orderInfo.order_no}}</text>
							</view>
							<view class="copy" @tap="copy" :data-order_no="orderInfo.order_no">复制</view>
						</view>
					</view>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">下单时间</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{orderInfo.add_time}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.user_select_time">
					<view class="setLeft">
						<text class="set-left-title">选择{{orderInfo.pickup_type==1?'自提':'送达'}}时间</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{orderInfo.user_select_time}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.receiving_goods_time">
					<view class="setLeft">
						<text class="set-left-title">收货时间</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{orderInfo.receiving_goods_time}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList_v2" v-if="orderInfo.pay_state==1">
					<view class="setLeft_v2">
						<text class="set-left-title">支付方式</text>
					</view>
					<view>
						<view v-for="(item, index) in orderInfo.payList" :key="index" class="select-type mar_l_20">
							<text>{{item.name}}</text>
							<text class="mar_l_10" v-if="orderInfo.payList.length>1">￥{{item.money}}</text>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.pickup_type">
					<view class="setLeft">
						<text class="set-left-title">配送方式</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text v-if="orderInfo.pickup_type==2">商家配送</text>
								<text v-if="orderInfo.pickup_type==1">到店自提</text>
								<text v-if="orderInfo.pickup_type==3">快递发货</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.extraction_code">
					<view class="setLeft">
						<text class="set-left-title">祝福码</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{orderInfo.extraction_code}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.order_genre && orderInfo.order_genre!=1">
					<view class="setLeft">
						<text class="set-left-title">订单类型</text>
					</view>
					<view class="setRight">
						<block v-if="orderInfo.order_genre==2">
							<text>拼团订单</text>
							<text class="error" v-if="orderInfo.act_state==3">{{(orderInfo.pay_state == 0?'(待付款)':'(拼团失败)')}}</text>
							<view v-else-if="orderInfo.pay_state == 1" class="bnt-comm pay-button" @tap="seeGroup">详情
							</view>
						</block>
						<block v-else-if="orderInfo.order_genre==3">
							<text>秒杀订单</text>
							<text class="error" v-if="orderInfo.act_state==0">{{(orderInfo.pay_state == 0?'(待付款)':'(秒杀失败)')}}</text>
						</block>
						<block v-else-if="orderInfo.order_genre==4">
							<text>预售订单</text>
							<text class="error" v-if="orderInfo.tail_money_state==1">(待付尾款)</text>
						</block>
					</view>
				</view>
				<view class="setList setlist-flex" v-if="orderInfo.remark">
					<view class="setLeft">
						<text class="set-left-title">订单留言</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList mysetlist-font">
							<text style="text-wrap: wrap;word-break: break-word;">{{orderInfo.remark}}</text>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.pay_state==0||(orderInfo.order_genre==4&&orderInfo.tail_money_state==1)">
					<view></view>
					<view class="setRight">
						<view class="bnt-comm" v-if="orderInfo.order_genre==4&&orderInfo.tail_money_state!=1" @tap="cancelPay">取消订单</view>
						<view class="bnt-comm pay-button" @tap="toPay">立即付款</view>
					</view>
				</view>
			</view>
			<!-- 订单支付阶段 -->
			<view class="payment-stage" v-if="advance.advance_type == 2">
				<view class="stage-one">
					<view class="stage-left">
						<image :src="'/images/check-' + (orderInfo.pay_state==0?2:1) + '.png'"></image>
						<view>
							<text>阶段一: 定金</text>
							<text class="order-money-font" v-if="advance.refuse_earnest_price==0">（不可退）</text>
							<text class="order-money-font" v-else>（可退<text
									v-if="orderInfo.pay_state!=1&&orderInfo.tail_money_state!=1">,请至售后订单查看进度</text>）</text>
						</view>
					</view>
					<view class="stage-right">￥{{advance.all_earnest_price}}</view>
				</view>
				<view class="stage-middle"></view>
				<view class="stage-two">
					<view class="stage-left">
						<image :src="'/images/check-' + (orderInfo.pay_state==1?1:2) + '.png'"></image>
						<view>阶段二: 尾款</view>
					</view>
					<view class="stage-right">￥{{advance.tail_money}}</view>
				</view>
				<view v-if="orderInfo.pay_state!=1" class="stage-tip">尾款支付时间 {{advance.tail_start_time}} ~
					{{advance.tail_end_time}}
				</view>
				<view v-else class="stage-tip">尾款支付时间 {{advance.trade_date}}</view>
			</view>
		</block>

	</view>
</template>

<script>
	// pages/myOrderDetail/myOrderDetail.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				arr: [],
				loadingHidden: false,
				showAfterSale: false,
				goodsList: [],
				activeIndex: 1,
				orderInfo: null,
				//购买详情
				advance: {},
				order_no: "",
				payList: [{
						name: '现金',
						type: 1
					},
					{
						name: '银行卡',
						type: 2
					},
					{
						name: '微信支付',
						type: 3
					},
					{
						name: '支付宝支付',
						type: 4
					},
					{
						name: '会员卡余额支付',
						type: 5
					},
					{
						name: '小程序商城微信支付',
						type: 6
					},
					{
						name: '其他支付方式',
						type: 7
					},
					{
						name: '组合支付',
						type: 8
					},
				], //支付类型 1现金  2银行卡 3微信支付   4支付宝支付  5会员卡余额支付  6小程序商城微信支付    7其他支付方式   8组合支付
				integral_name:''
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options);
			var order_no = options.order_no;
			this.setData({
				order_no: order_no,
			});
			this.integral_name = this.$store.integral_name;
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: async function() {
			await this.$onLaunched;
			this.getOrderDetail();
		},
		methods: {
			//查看拼团详情
			seeGroup: function() {
				console.log('../../index/Collage/Collage?order_id=' + this.orderInfo.id + '&ty=1&type=2')
				uni.navigateTo({
					url: '../../index/Collage/Collage?order_id=' + this.orderInfo.id + '&ty=1&type=2'
				});
			},
			//取消待支付订单
			cancelPay: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认取消该订单吗？',
					confirmColor: '#ff5c6d',
					confirmText: '关闭',
					showCancel: false,
					success: result => {
						if (result.confirm) {
							getApp().globalData.sendRequest({
								url: '/Order/cancelPay',
								data: {
									order_no: that.order_no
								},
								success: function(res) {
									if (res.status == 1) {
										uni.showModal({
											title: '提示',
											content: res.msg,
											confirmColor: '#ff5c6d',
											confirmText: '关闭',
											showCancel: false,
											success: result => {
												if (result.confirm) {
													uni.navigateBack({
														delta: 1
													});
												}
											}
										});
									} else {
										uni.showModal({
											title: '错误提示',
											content: res.msg,
											confirmColor: '#ff5c6d',
											confirmText: '关闭',
											showCancel: false,
											success: result => {}
										});
									}
								}
							});
						}
					}
				});
			},
			//去支付
			toPay: function() {
				if (this.orderInfo.order_genre == 4 && this.orderInfo.tail_money_state == 1) {
					getApp().globalData.sendRequest({
						url: '/Advance/advance_tail_info',
						data: {
							order_no: this.order_no
						},
						success: res => {
							if (res.status == 1) {
								uni.navigateTo({
									url: '/pages/order/waitPay/waitPay?order_no=' + this.order_no
								});
							} else {
								uni.showModal({
									confirmColor: '#ff5c6d',
									confirmText: '确定',
									content: res.msg,
									showCancel: false,
									success: result => {},
									title: '错误提示'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/order/waitPay/waitPay?order_no=' + this.order_no
					});
				}
			},
			//复制订单号
			copy: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.order_no,

					success(res) {
						uni.getClipboardData({
							success(res) {
								console.log(res.data); // data
								uni.showToast({
									title: '复制成功'
								})
							}

						});
					}

				});
			},
			details: function(e) {
				if (this.orderInfo.order_genre == 4) {
					uni.navigateTo({
						url: '/pages/index/advanceDetails/advanceDetails?id=' + e.currentTarget.dataset.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/mer/goods/details/details?id=' + e.currentTarget.dataset.id,
					});
				}
			},
			getOrderDetail: function() {
				var order_no = this.order_no;
				var that = this;
				that.integral_name = this.$store.integral_name;
				getApp().globalData.sendRequest({
					url: '/Order/getOrderDetail_v3',
					type: "post",
					data: {
						order_no: order_no
					},
					showLoading: true,
					success: function(res) {
						if (res.status == 1) {
							that.setData({
								orderInfo: res.order_info,
								goodsList: res.order_info.sell_info,
								loadingHidden: true,
								advance: res.order_info.order_genre == 4 ? res.order_info.advance_info : {}
							});

							if (res.order_info.pay_state == 0) {
								//设置标题
								uni.setNavigationBarTitle({
									title: '订单详情（待付款）'
								});
							} else if (res.order_info.order_genre == 4 && res.order_info.pay_state != 1) {
								uni.setNavigationBarTitle({
									title: `订单详情（${res.order_info.state}）`
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500,
								mask: true,
								success: function(res) {
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										});
									}, 1500);
								}
							});
						}
					}
				});
			}
		}
	};
</script>
<style>
	@import "./myOrderDetail.css";

	.gift_icon {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		background-color: #ff5e6e;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
		border-radius: 8rpx 8rpx 16rpx 0;
		margin-left: 12rpx;
	}
</style>
